<template>
    <el-container>
        <el-header class="pdbt rigtop">
          <i class="fa el-icon-s-unfold" @click="clickFold" v-if="iconIf"></i> 
          <i class="fa el-icon-s-fold" @click="clickFold" v-if="!iconIf"></i>
          指标结转
        </el-header>
        <el-main class="padding_top heiauto">
            <el-form ref="elForm" :model="formData" size="small" label-width="100px"
                label-position="left">
                <el-form-item label="指标" prop="field101">
                    <el-input v-model="formData.field101" placeholder="请输入指标" clearable :style="{width: '100%'}">
                    </el-input>
                </el-form-item>
                <el-form-item label="数据源任务" prop="field102">
                    <el-select v-model="formData.field102" placeholder="请选择数据源任务" clearable :style="{width: '100%'}">
                    <el-option v-for="(item, index) in field102Options" :key="index" :label="item.label"
                        :value="item.value" :disabled="item.disabled"></el-option>
                    </el-select>
                </el-form-item>
                <el-row type="flex" justify="start" align="bottom" class="el_row_btn">
                    <el-form-item label-width="5px" label="" prop="field159">
                      <el-button type="primary" icon="el-icon-plus" size="mini" @click="czfClick(' + ')"></el-button>
                    </el-form-item>
                    <el-form-item label-width="5px" label="" prop="field158">
                      <el-button type="primary" icon="el-icon-minus" size="mini" @click="czfClick(' - ')"></el-button>
                    </el-form-item>
                    <el-form-item label-width="5px" label="" prop="field156">
                      <el-button type="primary" icon="el-icon-close" size="mini" @click="czfClick(' * ')"></el-button>
                    </el-form-item>
                    <el-form-item label-width="5px" label="" prop="field164">
                      <el-button type="primary" size="mini" @click="czfClick(' / ')">÷</el-button>
                    </el-form-item>
                    <el-form-item label-width="5px" label="" prop="field165">
                      <el-button type="primary" size="mini" @click="czfClick(' ( ')">（</el-button>
                    </el-form-item>
                    <el-form-item label-width="5px" label="" prop="field166">
                      <el-button type="primary" size="mini" @click="czfClick(' ) ')">）</el-button>
                    </el-form-item>
                    <el-form-item label-width="5px" label="" prop="field167">
                      <el-button type="primary" size="mini" @click="czfClick(' SUM ')">SUM</el-button>
                    </el-form-item>
                </el-row>
                <el-form-item label-width="0" prop="field110">
                    结转表达式
                    <el-input v-model="formData.field110" type="textarea" placeholder="请输入结转表达式"
                    :autosize="{minRows: 10, maxRows: 1000}" :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label-width="0" prop="field111">
                    表达式解释
                    <el-input v-model="formData.field111" type="textarea" placeholder="请输入表达式解释"
                    :autosize="{minRows: 6, maxRows: 1000}" :style="{width: '100%'}"></el-input>
                </el-form-item>
            </el-form>
        </el-main >
        <el-footer style="text-align: center;">
            <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
        </el-footer>
    </el-container>
</template>
<script>
import waves from '@/directive/waves/index.js' // 水波纹指令
import { isNull } from 'xe-utils/methods';
  export default {
    components: {
      waves
    },
     props: {
       moZbParam: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    watch: {
      moZbParam: {
        handler(data) {
         
          //this.bnjsData.field101 = "2";监听的同时改变右侧编辑模块的作用范围指标的选择
        },
        deep: true,
        immediate:true
      },
    },
    data() {
      return {
        iconIf: false,
        // isFold: '0',
        isFoldz: '',
        formData: {
            field101: undefined,
            field102: undefined,
            field110: undefined,
            field111: undefined,
        },
        field102Options: [{
            "label": "选项一",
            "value": 1
        }, {
            "label": "选项二",
            "value": 2
        }],
      }
    },
    computed: {},
    methods: {
      clickFold() {
          if(this.isFold==='1'){
            this.isFold = '0'
            this.iconIf = false
          }else{
            this.isFold = '1'
            this.iconIf = true
          }
          this.isFoldz = this.isFold
          this.$emit('myclickFold', this.isFoldz)
      },
      submitForm() {
       
      },
    }
  }
</script>
<style lang="scss" scoped>
.padding_top .el-form{
  padding: 0 10px;
}
.padding_top{
     max-height: calc(100% - 80px);
    overflow: auto;
}

.el_row_btn .el-button--mini{
  padding:4px 6px;
  width:100%;
}
.padding_top .el_row_btn .el-form-item{
  margin-bottom: 0px;
  flex: 1;
  margin-top:0;
}
.padding_top .el-form-item{
  margin-top: 6px;
  margin-bottom: 6px;
}
.padding_top .el-textarea{
  margin-top: 8px;
  margin-bottom: 8px;
}
::v-deep .el-form-item--medium .el-form-item__label{
  text-align: right;
}
::v-deep .padding_top .el-form-item--medium .el-form-item__content{
  line-height: 30px;  text-align: left;
}
</style>
